<template>
	<div>
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div class="w65 ma p05 da">
				<div v-for="(item, index) in auditList" :key="index">
					<div
						:class="selIndex == item.id ? 'b2f w6 h1.2 bgc2f6 cfff br05 tac fz08 p04' : 'b03 w6 h1.2 br05 tac c999 fz08 p04 '"
						style="margin-right: 1rem;"
						@click="clickAudit(item.id)"
					>
						{{ item.name }}
					</div>
				</div>
			</div>
			<div class="w65 ma">
				<div v-if="selIndex == 0">
					<el-card class="box-card">
						<table>
							<tr>
								<td class="fwb fz08">钻孔编号</td>
								<td class="fz08">{{ getData.number || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">钻孔柱状图</td>
								<td class="fz08" v-if="getData.image != null" style="color: #2F6BBB;cursor: pointer;" @click="ddasda">查看</td>
								<td class="fz08" v-else>{{ noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">原始资料档号</td>
								<td class="fz08">{{ getData.file_number || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">钻孔位置</td>
								<td class="fz08">{{ getData.position || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">钻孔类型</td>
								<td class="fz08">{{ getData.drill_type || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">钻孔深度</td>
								<td class="fz08">{{ getData.altitude || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">钻孔日期</td>
								<td class="fz08">{{ getData.end_time || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">开始时间</td>
								<td class="fz08">{{ getData.start_time || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">经度</td>
								<td class="fz08">{{ getData.longitude || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">纬度</td>
								<td class="fz08">{{ getData.latitude || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">钻孔深度</td>
								<td class="fz08">{{ getData.altitude || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">钻孔坐落</td>
								<td class="fz08">{{ getData.district || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">比例尺</td>
								<td class="fz08">{{ getData.scale || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">施工单位</td>
								<td class="fz08">{{ getData.construction_unit || noData }}</td>
							</tr>
						</table>
					</el-card>
				</div>
				<div v-if="selIndex == 1">
					<el-card class="box-card">
						<table>
							<tr>
								<td class="fwb fz08">项目名称</td>
								<td class="fz08">{{ getData.entry_name || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">分类</td>
								<td class="fz08">
									<div v-if="getData.type == 1">城市地质</div>
									<div v-if="getData.type == 2">地热资源</div>
									<div v-if="getData.type == 3">区域海洋</div>
								</td>
							</tr>
							<tr>
								<td class="fwb fz08">工作程度</td>
								<td class="fz08">{{ getData.degree_of_work || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">主要矿种</td>
								<td class="fz08">{{ getData.minerals || noData }}</td>
							</tr>
						</table>
					</el-card>
				</div>
				<div v-if="selIndex == 2">
					<el-card class="box-card">
						<table>
							<tr>
								<td class="fwb fz08">保管单位名称</td>
								<!-- <el-popover placement="top-start" title="保管单位信息" width="400" trigger="hover"> -->
								<td class="fz08" style="width: 100rem;position: relative;" @mouseover="mouseOver" @mouseleave="mouseLeave" slot="reference">
									<div>
										{{ getData.construction_unit || noData }}
										<div
											v-if="isShowunit"
											v-html="content.content"
											style="width: 56rem; height: 60rem; overflow-y: auto; box-sizing: border-box; padding: 2rem ; background-color: #FFFFFF;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 30px;position: absolute;top:21px;left:170px;"
										>
											{{ content.content }}
										</div>
									</div>
								</td>
								<!-- </el-popover> -->
							</tr>
							<tr>
								<td class="fwb fz08">保管单位地址</td>
								<td class="fz08">{{ content.address || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">保管单位邮箱</td>
								<td class="fz08">{{ content.email || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">保管单位电话</td>
								<td class="fz08">{{ content.phone || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">保管单位传真</td>
								<td class="fz08">{{ content.chuanzhen || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">保管单位网址</td>
								<td class="fz08">{{ content.wangzhi || noData }}</td>
							</tr>
							<tr>
								<td class="fwb fz08">保管单位邮编</td>
								<td class="fz08">{{ content.youbian || noData }}</td>
							</tr>
						</table>
					</el-card>
				</div>
			</div>
		</div>
		<!-- 查看大图 -->
		<dialogImg :lookImg="lookImg" :biggerImg="biggerImg" @handleClose="handleClose" v-if="biggerImg"></dialogImg>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import dialogImg from '@/components/dialogImg.vue';
import { drillDetails, safekeepingUnit } from '@/api/drill.js';
import noData from '@/assets/noData.jpg';
export default {
	name: 'drillDetails',
	components: {
		breadcrumb,
		dialogImg
	},
	data() {
		return {
			isShowunit: false,
			biggerImg: false,
			getData: {},
			lookImg: '',
			selIndex: 0,
			auditList: [{ name: '钻孔信息', id: 0 }, { name: '项目信息', id: 1 }, { name: '保管单位信息', id: 2 }],
			content: null
		};
	},
	created() {
		let data = {
			id: this.$route.query.id
		};
		drillDetails(data).then(res => {
			this.getData = res.data;
			console.log(res.data);
			safekeepingUnit({ safekeeping_unit: res.data.construction_unit.trim() }).then(res => {
				this.content = res.data;
			});
			if (res.data.image == null) {
				this.lookImg = noData;
			} else {
				this.lookImg = this.url + res.data.image;
			}
		});
	},
	methods: {
		clickAudit(val) {
			this.selIndex = val;
		},
		ddasda() {
			this.biggerImg = true;
		},
		handleClose(val) {
			this.biggerImg = val;
		},
		mouseOver() {
			this.isShowunit = true;
		},
		mouseLeave() {
			this.isShowunit = false;
		},
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	background-color: #ffffff;
	height: 65rem;
}
table {
	width: 100%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
/*控制cellspacing*/
table td {
	padding: 0.7rem;
	width: 10rem;
	font-size: 0.9rem;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.box-card {
	height: 60rem;
}
</style>
